import 'dart:async';
import 'package:flutter/material.dart';

class QueueWidget extends StatefulWidget {
  // 外部传入的数据列表
  final List<String> data;

  const QueueWidget({Key key, this.data}) : super(key: key);

  @override
  _QueueWidgetState createState() => _QueueWidgetState();
}

class _QueueWidgetState extends State<QueueWidget> {
  int lenVal = 0;

  @override
  void initState() {
    super.initState();
    lenVal = widget.data.length;
  }

  @override
  void didUpdateWidget(covariant QueueWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    setState(() {
      lenVal = widget.data.length;
    });
    print("===========, $lenVal");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
          children: List.generate(lenVal, (index) {
        int countVal = index + 1;
        return Container(
          child: Row(
            children: [Text('计次 $countVal'), Text(widget.data[index])],
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
          ),
          height: 40,
          alignment: Alignment.center,
          padding: EdgeInsets.only(left: 20, right: 20),
        );
      })
          // children: widget.data.map((e) {
          //   return Container(
          //     child: Row(
          //       children: [Text('计次'), Text('xxxxx')],
          //       mainAxisAlignment: MainAxisAlignment.spaceBetween,
          //     ),
          //     height: 40,
          //     alignment: Alignment.center,
          //     padding: EdgeInsets.only(left: 20, right: 20),
          //   );
          // }).toList(),
          ),
    );
  }
}

class PanelWidget extends StatefulWidget {
  final DateTime time;
  const PanelWidget({Key key, this.time}) : super(key: key);

  @override
  _PanelWidgetState createState() => _PanelWidgetState();
}

class _PanelWidgetState extends State<PanelWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          Container(
            child: Text(
              widget.time.toString(),
              style: TextStyle(fontSize: 24.0),
            ),
            height: double.infinity,
            alignment: Alignment.center,
            width: MediaQuery.of(context).size.width,
          ),
          Positioned(
            child: Text(
              'Positioned',
              style: TextStyle(color: Color(0xffa3a3a3)),
            ),
            top: 8.0,
            right: 12.0,
          )
        ],
      ),
      alignment: Alignment.center,
      height: 80,
    );
  }
}

class CtrlWidget extends StatefulWidget {
  final ValueChanged<String> addVal;
  final VoidCallback createTimer;

  const CtrlWidget({Key key, this.addVal, this.createTimer}) : super(key: key);

  @override
  _CtrlWidgetState createState() => _CtrlWidgetState();
}

class _CtrlWidgetState extends State<CtrlWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: [
          TextButton(
            onPressed: () {
              widget.createTimer();
            },
            child: Text("Start"),
          ),
          MaterialButton(
            onPressed: () {
              widget.addVal('xxxxx');
            },
            child: Text('Stop'),
            minWidth: 80.0,
            height: 40.0,
            color: Color.fromRGBO(255, 145, 0, 1),
            padding: EdgeInsets.all(8.0),
          ),
          // ClipRRect(
          //   borderRadius: BorderRadius.circular(80.0),
          //   child: ElevatedButton(
          //     onPressed: () {},
          //     child: Text('圆角按钮'),
          //   ),
          // ),
        ],
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
      ),
      alignment: Alignment.center,
      height: 80,
      padding: EdgeInsets.only(left: 40, right: 40),
      // decoration: BoxDecoration(color: Color.fromRGBO(255, 145, 0, 1)),
    );
  }
}

class StopWatch extends StatefulWidget {
  const StopWatch({Key key}) : super(key: key);

  @override
  _StopWatchState createState() => _StopWatchState();
}

class _StopWatchState extends State<StopWatch> {
  Timer _timer;
  DateTime dtlVal = DateTime.now();
  List<String> list = [];
  // List<String> list = ['苹果', '香蕉', '橙子', '芒果'];

  @override
  void initState() {
    super.initState();
    this.createTimer();
  }

  void createTimer() {
    if (_timer != null && _timer.isActive) {
      print('line todo');
    } else {
      _timer = Timer.periodic(const Duration(seconds: 1), (timer) async {
        setState(() {
          dtlVal = DateTime.now();
        });
      });
    }
  }

  void addStrValue(String value) {
    if (_timer.isActive) {
      _timer?.cancel();
      setState(() {
        list.add(dtlVal.toString());
      });
    }
  }

  @override
  void dispose() {
    super.dispose();
    _timer?.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('A StopWatch'),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(children: [
            PanelWidget(time: dtlVal),
            CtrlWidget(addVal: addStrValue, createTimer: createTimer),
            QueueWidget(data: list),
          ]),
        ),
        // child: SingleChildScrollView(
        //   child: Column(
        //     children: List.generate(100, (index) {
        //       return Container(
        //         height: 80.0,
        //         width: MediaQuery.of(context).size.width,
        //         child: Text('Item $index'),
        //       );
        //     }), // 生成一个长列表
        //   ),
        // ),
      ),
    );
  }
}
